<template>
	<sysJk :label="'11.末端配电装置检查和供电功能测试'" showBack :withoutTop="true" :leftTime="lefttime">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="w100" v-if="curnum==0">
					<view class="taskTit"> 
						<view class="tasklfex">
							<view>{{questions[curnum]}}</view>
							<view class="stepbs">  <image :src="jd21" mode="heightFix" style="height: 2.5vh;"></image> </view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;"></image>
					</view>
					<view class="myCard">
						<view class="cardContent">

							<view class="answerview">
								<view class="ytitle">请测试备用电源指示灯是否正常</view>
								<radio-group @change="aChange">
									<label class="ritem" v-for="item,index in answer1" :key="index">
										<view>
											<radio :value="item" :checked="da1 === item" :style="{transform:'scale('+heightBl+')'}" />{{item}}
										</view>
									</label>
								</radio-group>
							</view>
							<view class="handleBtn"> 
								<u-button v-if="examType==1" :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
										@click='explain(0)'>查看解析</u-button>
							</view>
							<view class="btnArea">
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="senda1()">下一步</u-button>
								<u-button @click="reset1()"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="back()">返回</u-button>
							</view>
							 
							<view v-if="isa111" id="area111" class="openiv" :style="{left:a1111left,top:a1111top}"
								@tap="openimgview('11-3',113)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isa111" id="area1111-1" class="openiv" :style="{left:a111l2eft,top:a11112top}"
								@tap="openimgview('11-2',112)">
								<image class="openi" :src="openimg"></image>
							</view>
							
							<view v-if="isa111" id="area1111-s1" class="openiv" :style="{ left:sc1l,top:sc1t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="isnum1==-1?greenimg: grayimg" :style="{ left:sc1l,top:sc1t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa111" id="area1111-s2" class="openiv" :style="{ left:sc2l,top:sc2t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="isnum1==-1?redimg: isnum1==1?greenimg:grayimg" :style="{ left:sc2l,top:sc2t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa111" id="area1111-s3" class="openiv" :style="{ left:sc3l,top:sc3t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="isnum1==-1?grayimg:isnum1==0?grayimg:greenimg" :style="{ left:sc3l,top:sc3t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa111" id="area1111-s4" class="openiv" :style="{ left:sc4l,top:sc4t,width:scw,height:sch}"
							 >
								<image class="openi openiv" :src="isnum1==-1?grayimg:redimg" :style="{ left:sc4l,top:sc4t,width:scw,height:sch}"></image>
							</view> 
							
							<view v-if="isa112" id="area112" class="openiv" :style="{left:a1112cleft,top:a1112cltop}"
								@tap="openimgview('11-1',111)">
								<image class="openi" :src="closeimg"></image>
							</view>

							<view v-if="isa112" id="area112b" class="openiv"
								:style="{left:a1112bleft,top:a1112bltop,width:a1112bw,height:a1112bh}"
								@tap="openimgview('11-2-1',112)"> 
							</view> 
							<view v-if="isa113" id="area1111" class="openiv" :style="{ left:a11111cleft,top:a11111ctop}"
								@tap="openimgview('11-1-1',111)">
								<image class="openi" :src="closeimg"></image>
							</view>   
							
							<view v-if="isa113" id="area1111" class="openiv" :style="{ left:c1l,top:c1t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="isnum1==-1?greenimg: grayimg" :style="{ left:c1l,top:c1t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa113" id="area1111" class="openiv" :style="{left:c2l,top:c2t,width:cw,height:ch}"
								 >
								<image class="openi openiv" :src="isnum1==-1?redimg: isnum1==1?greenimg:grayimg" :style="{left:c2l,top:c2t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa113" id="area1111" class="openiv" :style="{ left:c3l,top:c3t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="isnum1==-1?grayimg:isnum1==0?grayimg:greenimg" :style="{ left:c3l,top:c3t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa113" id="area1111" class="openiv" :style="{ left:c4l,top:c4t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="isnum1==-1?grayimg:redimg"  :style="{ left:c4l,top:c4t,width:cw,height:ch}"></image>
							</view>  
							
						 
						</view>
					</view> 
				</view>


				<view class="w100" v-if="curnum==1">
					<view class="taskTit">

						<view class="tasklfex">
							<view>{{questions[0]}}</view>
							<view class="stepbs">  <image :src="jd22" mode="heightFix" style="height: 2.5vh;"></image></view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;"></image>
					</view>
					<view class="myCard">
						<view class="cardContent">

							<view class="answerview">
								<view class="ytitle"> 请测试常用电源指示灯是否正常</view>
								<radio-group @change="aChange2">
									<label class="ritem" v-for="item,index in answer2" :key="index">
										<view>
											<radio :value="item" :checked="da2 === item" :style="{transform:'scale('+heightBl+')'}" />{{item}}
										</view>
									</label>
								</radio-group>
							</view>
							<view class="handleBtn">
							
								<u-button v-if="examType==1" :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
										@click='explain(0)'>查看解析</u-button>
							</view>
							<view class="btnArea">
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
											@click="senda2()">提交</u-button>
								<u-button   @click="reset2()"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="back()">返回</u-button>
							</view>
							 

							<view v-if="isa1112" id="area111" class="openiv" :style="{left:a1111left,top:a1111top}"
								@tap="openimgview('11-4',114)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isa1112" id="area1111-1" class="openiv" :style="{left:a111l2eft,top:a11112top}"
								@tap="openimgview('11-2-1',1121)">
								<image class="openi" :src="openimg"></image>
							</view>
							
							
							<view v-if="isa1112" id="area1111-s1" class="openiv" :style="{ left:sc1l,top:sc1t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==0 || isnum2 ==2)?  grayimg:greenimg" :style="{ left:sc1l,top:sc1t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa1112" id="area1111-s2" class="openiv" :style="{ left:sc2l,top:sc2t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==1)?grayimg:redimg" :style="{ left:sc2l,top:sc2t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa1112" id="area1111-s3" class="openiv" :style="{ left:sc3l,top:sc3t,width:scw,height:sch}"
								 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==0 || isnum2 ==4)? greenimg:grayimg" :style="{ left:sc3l,top:sc3t,width:scw,height:sch}"></image>
							</view>
							<view v-if="isa1112" id="area1111-s4" class="openiv" :style="{ left:sc4l,top:sc4t,width:scw,height:sch}"
							 >
								<image class="openi openiv" :src="isnum2==-1 ?redimg: grayimg" :style="{ left:sc4l,top:sc4t,width:scw,height:sch}"></image>
							</view> 
							

							<view v-if="isa114" id="area111" class="openiv" :style="{ left:a11111cleft,top:a11111ctop}"
								@tap="openimgview('11-1-2',1112)">
								<image class="openi" :src="closeimg"></image>
							</view>


							<view v-if="isa1121" id="area112" class="openiv" :style="{left:a1112cleft,top:a1112cltop}"
								@tap="openimgview('11-1-2',1112)">
								<image class="openi" :src="closeimg"></image>
							</view>

							<view v-if="isa1121" id="area112b" class="openiv"
								:style="{left:a1112bleft,top:a1112bltop,width:a1112bw,height:a1112bh}"
								@tap="openimgview('11-2',1121)">
							</view>
							<!--
							A.亮23灯（异常）
							D.亮1或者2灯（异常）
							
							0  h l  l h
							1  l h  h h 
							2  h l  h h 
							
							B.亮12灯（正常）C.亮123灯（正常）
							3  l l  h h
							4  l l  l h 
							-->
							<view v-if="isa114" id="area11111" class="openiv" :style="{ left:c1l,top:c1t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==0 || isnum2 ==2)?  grayimg:greenimg" :style="{ left:c1l,top:c1t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa114" id="area11112" class="openiv" :style="{left:c2l,top:c2t,width:cw,height:ch}"
								 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==1)?grayimg:redimg" :style="{left:c2l,top:c2t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa114" id="area11113" class="openiv" :style="{ left:c3l,top:c3t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="(isnum2==-1 || isnum2==0 || isnum2 ==4)? greenimg:grayimg" :style="{ left:c3l,top:c3t,width:cw,height:ch}"></image>
							</view>  
							<view v-if="isa114" id="area11114" class="openiv" :style="{ left:c4l,top:c4t,width:cw,height:ch}"
							 >
								<image class="openi openiv" :src="isnum2==-1 ?redimg: grayimg"  :style="{ left:c4l,top:c4t,width:cw,height:ch}"></image>
							</view>  



						</view>
					</view>
					<u-mask :show="showFlag" @click="onClickHide">
						<view class="wrapper"
							style="display: flex;align-items: center;justify-content: center;height:100%">
							<view class="block" style="width:200px;height:200px;background: #fff;">12345</view>
						</view>
					</u-mask>

				</view>

				<u-mask :show="isexplain" @click="closeex" >
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block"
							style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle" style="color: #000;">
								【试题解析】 正确答案
							</view>
							<view class="overtitle" style="color: #000;">
								<text>{{explaintext}}</text>
							</view>
						</view>
					</view>
				</u-mask>


			</view>

		</template>
	</sysJk>

</template>


<script>
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	import {
		formatTime
	} from '@/util/index.js'
	export default {
		components: {
			sysJk
		},

		data() {
			const app = getApp();
			const baseUrl = app.globalData.requestUrl;
			return {
				widthBl:0,
				heightBl:0,
				lefttime: '300',
				examId: '',
				examType: 1,
				base: baseUrl,
				writeBox: null,
				writeBoxLeft: 0,
				writeBoxTop: 0,

			 

				bigboxleft: 0,
				bigboxtop: 0,

				isopen112: false,
				open112left: 0,
				open112top: 0,
				open112w: 0,
				open112h: 0,

				isclose112: false,


				isa111: true,
				isa112: false,
				isa113: false,


				isa1112: false,
				isa1121: false,
				isa114: false,


				isopen113: false,
				open113left: 0,
				open113top: 0,

				//11-1
				a1111left: 0, //   1000
				a1111top: 0, //	520  //to 11-1-1

				a111l2eft: 0, //	1100 
				a11112top: 0, //	540  //to11-2

				//11-2

				a1112cleft: 0, // 	1300
				a1112cltop: 0, //280 //c to 11-1

				a1112bleft: 0, // 750
				a1112bltop: 0, //		332	
				a1112bw: 0, //		45
				a1112bh: 0, //	65  //to 11-2-1

				//11-1-1
				a11111cleft: 0, // 1120
				a11111ctop: 0, // 400

				//第二步
				//11-1-2
				a1111left: 0, // 1000
				a1111top: 0, //	520  //to 11-4

				a111l2eft: 0, // 	1100 
				a11112top: 0, //	540  //to11-2

				//11-2

				a11121bleft: 0, //		864
				a11121btop: 0, //	597
				a11121bw: 0, //	155
				a11121bh: 0, //	 135  //自动手动切换
				
				
				c1l:741,
				c1t:265, 
				
				c2l:860,
				c2t:265,
				
				
				c3l:975,
				c3t:265,
				
				c4l:1095,
				c4t:265,
				
				cw:50,
				ch:50,
				
				//外面4个小图标
				
				sc1l:	964.5,
				sc1t:	367.5,
				
				sc2l:	997.5,
				sc2t:	367.5,
				
				sc3l:	1030.5,
				sc3t:	367.5,
				
				sc4l:	1064.5,
				sc4t:	367.5,
				
				scw:	15,
				sch:	15,




				showFlag: false,
				openimg: baseUrl + "/static/image/open.png",
				closeimg: baseUrl + "/static/image/close.png",
				
				
					redimg: baseUrl + "/static/image/red.png",
						greenimg: baseUrl + "/static/image/green.png",
							grayimg: baseUrl + "/static/image/back.png",
				bUrl: baseUrl + "/static/image/wb/11-1.jpg",
				bUrl2: baseUrl + "/static/image/wb/11-2.jpg",
				questionsnum: 1, //题目数

				curnum: 0, //当前题目
				jd21:baseUrl+"/static/image/jd/j2-0.png",
				jd22:baseUrl+"/static/image/jd/j2-2.png",
				questions: ['【1/1】请测试末端配电装置电源指示灯是否正常'],
				answer1: ['备用电源指示灯正常', '备用电源指示灯异常'],
				answer2: ['常用电源指示灯正常', '常用电源指示灯异常'],
			 
				islist: 0, // 灯状态 0绿红00 1红，，2 00绿红 3 0红绿0
				
				
				/////////////////
				
				////////////////
				

				innerAudioContext: uni.createInnerAudioContext(),
				jb: baseUrl + "/static/image/jb.MP3",
				quest: {
					fz_id: 2,
					title: '',
					no: "",
					question_type: 1,
					user_answer: '',
					answer: '',
					is_correct: '',
					score: '',
					start_time: 0,
					end_time: 0,
					question_answer: ''
				},
				explainarr: [' 自动状态下拉主电电闸，观察2#的两个灯是否都亮，都亮才表示正常。下一步，自动状态下推主电电闸，观察1#的两个灯是否都亮，都亮才表示正常。\r\n\r\n正确答案：备用电源指示灯异常，常用电源指示灯异常'],
				isexplain: false,
				explaintext: '',
				tH: 0,
				da1:'',
				score1:0,
				score2:0,
				da2:'',
				isnum1:-1, //1随机, 
				isnum2:-1,//1随机, 
				isa1:-1,//1结果, 
			    isa2:-1,//2结果, 
			}
		},
		onLoad(options) {
			uni.setScreenBrightness({
				keepScreenOn: true,
				direction: 'landscape',
				success() {
					console.log("a")
				}
			})
			let that = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		console.log(res)
			// 		// uni.setStorageSync('titleHeight',res.statusBarHeight+capsuleH)
			// 		that.tH = uni.getMenuButtonBoundingClientRect().height + uni
			// 			.getMenuButtonBoundingClientRect().top * 2 + 21
			// 		//that.tH=85 
			// 		that.drawWhiteBox()
			// 	}
			// });
			this.examId = options.examId
			this.examType = options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('.imgview')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onShow() {
			// this.drawWhiteBox()
		},
		onReady() {
				  let that = this;
				  // #ifdef MP-WEIXIN
				  uni.getSystemInfo({
				    success: function(res) {
				      console.log(res)
				      // uni.setStorageSync('titleHeight',res.statusBarHeight+capsuleH)
				      that.tH = uni.getMenuButtonBoundingClientRect().height + uni
				          .getMenuButtonBoundingClientRect().top * 2 + 21
				      //that.tH=85
				      that.drawWhiteBox()
				    }
				  });
				  // #endif
				
				// #ifdef APP-PLUS
				let sy = uni.getSystemInfoSync()
				this.pT = sy.statusBarHeight
				this.tH = sy.statusBarHeight + 51
				that.drawWhiteBox(this.tH )
				
				// #endif
				},
		methods: { 
			  getRandomInt(min, max) {
			  min = Math.ceil(min);
			  max = Math.floor(max);
			  return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			back() {
				uni.navigateBack()
			},
			explain(id) {
				this.isexplain = true;
				this.explaintext = this.explainarr[id]

			},
			closeex() {
				this.isexplain = false
			},
			reset(){
					this.isopen112= false
					this.isclose112= false
					this.isa111= true
					this.isa112= false
					this.isa113= false 
					this.isa1112= false
					this.isa1121= false
					this.isa114= false 
					
					this.isopen113= false
					this.islist= 0
					this.isnum1=-1
					this.isa1=-1
					this.innerAudioContext.stop()
			},
			reset1(){
			let that = this	 
			that.reset()
			that.da1=""
			that.bUrl = that.base + "/static/image/wb/" + "11-1" + ".jpg";
			that.curnum=0
			},
			reset2(){
				let that = this 
			 that.reset()
			 that.da2=""
				that.curnum = 1
				that.bUrl = that.base + "/static/image/wb/" + "11-1-2" + ".jpg";
				that.isa1112 = true
				this.isnum2=-1
				this.isa2=-1
				that.islist = 2 //灯状态
			},
			senda1() {
				let that = this
				if(this.da1=="" ){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
				 return;
				}
			  if( that.isnum1==0 && that.da1=="备用电源指示灯异常"){
				   
				  that.score1=1
			  }	  else 
			  if( that.isnum1>0 && that.da1=="备用电源指示灯正常"){
			  			 	  that.score1=1
			  }	  else{
			  				    that.score1=0
			  }
				this.$showModal2({
					title: '确认提交？'+that.score1 ,
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
					
							that.curnum = 1
							that.bUrl = that.base + "/static/image/wb/" + "11-1-2" + ".jpg";
							that.isa1112 = true
							that.islist = 2 //灯状态
						
				}); 
			},
			senda2() {
				let that = this 
				if(this.da2=="" ){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
				 return;
				}
				if(that.isnum2<=2 && that.da2=="常用电源指示灯异常"){
								  that.score2=1
				}else 
				if( that.isnum2>2 && that.da2=="常用电源指示灯正常"){
								   
								  that.score2=1
				}	  else{
								    that.score2=0
				}
				let ss=that .score1+that .score2
				this.$showModal2({
					title: '确认提交？'+that.score2,
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
							uni.showLoading()
							fzQuestion(that.quest).then(res => {
								uni.hideLoading()
								let pages = getCurrentPages()
								if(pages.length==4){
									let prevPage = pages[pages.length - 3] 
									prevPage.$vm.status11 = true
									prevPage.$vm.addScore(ss)
									uni.navigateBack()
								}else{
									let prevPage = pages[pages.length - 2]
									prevPage.$vm.status11 = true
									prevPage.$vm.addScore(ss) 
									uni.navigateBack()
								} 
							})
					
				});

				// uni.showToast({
				// 	title: '提交后不可修改',
				// 	success() {
				// 		setTimeout(() => {
				// 			uni.navigateBack()
				// 		}, 500)

				// 	}
				// })
				/**
				 * 
				 * 
				 * 11、末端配电装置检查和供电功能测试【2】
									【1/1】请测试末端配电装置电源指示灯是否正常
									（分两步）
									请测试备用电源指示灯是否正常【1】
									备用电源指示灯正常
									备用电源指示灯异常
									【正常异常】两种情况
									请测试常用电源指示灯是否正常【1】
									常用电源指示灯正常
									常用电源指示灯异常
									【正常异常】两种情况
									
									score1 //1
									score2 //1
								
				 * 
*/
			},
			repage() {
				uni.navigateBack()
			},
			aChange(e){ 
				this.da1=e.detail.value
			},
			aChange2(e){ 
				this.da2=e.detail.value
			},

			openimgview(path, lb) {
				this.isarea = false
				this.isa1area1 = false
				this.isa1area2 = false

				this.bUrl = this.base + "/static/image/wb/" + path + ".jpg";
				switch (lb) {
					case 111:
						this.isa111 = true;

						this.isa113 = false;
						this.isa112 = false;
						switch (this.islist) {
							// islist:0,// 灯状态 0绿红00 1红，，2 00绿红 3 0红绿0
							case 0:
								this.bUrl = this.base + "/static/image/wb/" + '11-1' + ".jpg";
								break;
							case 1:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-1' + ".jpg";
								break;
							case 2:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-2' + ".jpg";
								break;
							case 3:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-3' + ".jpg";
								break;
						}
						break;
					case 112:
						this.isa112 = true;
						this.isa111 = false;
						
						
						if (path == '11-2-1') {
							if(this.islist==0){
								this.islist = 1
								//随机结果 
								this.isnum1=this.getRandomInt(0,2); //0 导常（4亮） ，1，正 234 亮  2 正 34 亮
								
								this.isa1=this.isnum1;
								console.log(this.isnum1)
							}else 
							if(this.islist==1){
								this.islist = 0
								this.isnum1=-1
								this.isa1=-1
							} 
						}
						if (this.islist == 0) {
							this.bUrl = this.base + "/static/image/wb/" + '11-2' + ".jpg";
						}
						if (this.islist == 1) {
							this.bUrl = this.base + "/static/image/wb/" + '11-2-1' + ".jpg";
						}


						break;
					case 113:

						this.isa113 = true;
						this.isa111 = false;
						switch (this.islist) {
							// islist:0,// 灯状态 0绿红00 1红，，2 00绿红 3 0红绿0
							case 0:
								this.bUrl = this.base + "/static/image/wb/" + '11-3-1' + ".jpg";
								break;
							case 1:
								this.bUrl = this.base + "/static/image/wb/" + '11-3' + ".jpg";
								break;
							case 2:
								this.bUrl = this.base + "/static/image/wb/" + '11-4' + ".jpg";
								break;
							case 3:
								this.bUrl = this.base + "/static/image/wb/" + '11-4-1' + ".jpg";
								break;
						}

						break;

					case 1112:
						this.isa1112 = true
						this.isa1121 = false
						this.isa114 = false

						switch (this.islist) {
							// islist:0,// 灯状态 0绿红00 1红，，2 00绿红 3 0红绿0
							case 0:
								this.bUrl = this.base + "/static/image/wb/" + '11-1' + ".jpg";
								break;
							case 1:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-1' + ".jpg";
								break;
							case 2:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-2' + ".jpg";
								break;
							case 3:
								this.bUrl = this.base + "/static/image/wb/" + '11-1-3' + ".jpg";
								break;
						}


						break;

					case 1121: //按钮
						this.isa1121 = true
						this.isa1112 = false
						
						 
						if (path == '11-2') {
							if(this.islist == 2){
								this.islist = 3
								this.isnum2=this.getRandomInt(0,4)
							}else if(this.islist ==3) {
								this.islist = 2
							}
							
							
						}
						if (this.islist == 2) {
							this.bUrl = this.base + "/static/image/wb/" + '11-2-1' + ".jpg";
						}
						if (this.islist == 3) {
							this.bUrl = this.base + "/static/image/wb/" + '11-2' + ".jpg";
						}
						
						break;
					case 114:
						this.isa114 = true
						this.isa1112 = false
						switch (this.islist) {
							// islist:0,// 灯状态 0绿红00 1红，，2 00绿红 3 0红绿0
							case 0:
								this.bUrl = this.base + "/static/image/wb/" + '11-3-1' + ".jpg";
								break;
							case 1:
								this.bUrl = this.base + "/static/image/wb/" + '11-3' + ".jpg";
								break;
							case 2:
								this.bUrl = this.base + "/static/image/wb/" + '11-4' + ".jpg";
								break;
							case 3:
								this.bUrl = this.base + "/static/image/wb/" + '11-4-1' + ".jpg";
								break;
						}

						break;




				}
			},
			showDialog() {
				this.showFlag = true
			},
			onClickHide() {
				this.showFlag = false
			},
		 


			drawWhiteBox(statusnum) {
				let that = this
				let warp = uni.createSelectorQuery().in(this).select('.imgview')

				warp.boundingClientRect(data => {
					console.log(that.tH)
					console.log(data)
					console.log(data.width)
					console.log(data.height)
					//有些设备取的是设备高度 data.height


					let widthBl = data.width / 1920
					let sy = uni.getSystemInfoSync()
					let heightBl = 0
					// if (data.height = sy.screenHeight) {
					// 	heightBl = (data.height - that.tH) / 921
					// } else {
					// 	heightBl = (data.height) / 921
					// }
					heightBl = (data.height-that.tH)/921
					that.widthBl=widthBl
					that.heightBl=heightBl
					//11-1
					that.a1111left = 1000 * widthBl + 'px'
					that.a1111top = 420 * heightBl + statusnum + 'px' //to 11-1-1

					that.a111l2eft = 1100 * widthBl + 'px'
					that.a11112top = 480 * heightBl + statusnum + 'px' //to11-2

					//11-2

					that.a1112cleft = 1300 * widthBl + 'px'
					that.a1112cltop = 320 * heightBl + statusnum + 'px' //c to 11-1

					that.a1112bleft = 750 * widthBl + 'px'
					that.a1112bltop = 249 * heightBl + statusnum + 'px'
					that.a1112bw = 45 * widthBl + 'px'
					that.a1112bh = 65 * heightBl + 'px' //to 11-2-1

					//11-1-1
					that.a11111cleft = 1120 * widthBl + 'px'
					that.a11111ctop = 440 * heightBl + statusnum + 'px'

					//第二步
					//11-1-2
					that.a1111left = 1000 * widthBl + 'px'
					that.a1111top = 420 * heightBl + statusnum + 'px' //to 11-4

					that.a111l2eft = 1100 * widthBl + 'px'
					that.a11112top = 480 * heightBl + statusnum + 'px' //to11-2

					//11-2

					that.a11121bleft = 864 * widthBl + 'px'
					that.a11121btop = 637 * heightBl + statusnum + 'px'
					that.a11121bw = 155 * widthBl + 'px'
					that.a11121bh = 135 * heightBl + 'px' //自动手动切换



			that.c1l= 741 * widthBl + 'px'
			that.	c1t  = 265 * heightBl + statusnum + 'px'
				
			that.	c2l= 860 * widthBl + 'px'
			that.	c2t = 265 * heightBl + statusnum + 'px'
				
				
			that.	c3l= 975 * widthBl + 'px'
			that.	c3t = 265 * heightBl + statusnum + 'px'
				
			that.	c4l= 1095 * widthBl + 'px'
			that.	c4t = 265 * heightBl + statusnum + 'px'
				
			that.	cw= 50 * widthBl + 'px'
			that.	ch = 50 * heightBl  + 'px'
			
			that.sc1l = 964.5 * widthBl + 'px'
			that.sc1t = 367.5 * heightBl + statusnum + 'px'
			
			that.sc2l = 997.5 * widthBl + 'px'
			that.sc2t = 367.5 * heightBl + statusnum + 'px'
				
			that.sc3l = 1030.5 * widthBl + 'px'
			that.sc3t = 367.5 * heightBl + statusnum + 'px'
				
			that.sc4l = 1064.5 * widthBl + 'px'
			that.sc4t = 367.5 * heightBl + statusnum + 'px'
				
			that.scw = 15 * widthBl + 'px'
			that.sch = 15 * heightBl  + 'px'
			



				}).exec()
				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			}
		}
	}
</script>


<style scoped lang="scss">
	
	.explaincss {
		padding: 20rpx;
		width: 300rpx;

		border-radius: 20rpx;
		border: 1rpx solid #000;
		background-color: #fff;
		color: #000;
		position: fixed;
		top: 50rpx;
		left: 225rpx;
		z-index: 5000;
	}
	.taskTit {
		height: 21px;line-height: 21px;width: 100%;text-align: left;background: #fff;color: #000;font-size: 15px
	}
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.w100 {
			width: 100%;
			height: 100%;
		}

		.openiv {
			position: fixed;
		}

		.openi {
			width: 20px;
			height: 20px;
		}

		.tasklfex {
			display: flex;
			justify-content: space-between;
		}

		.stepbs {
			text-align: right;
			 
		}


		.answerview {
			position: fixed;
			top: 80rpx;
			left: 40rpx;
			background-color: #ffffff;
			color: #000;
			width: 220rpx;
			font-size: 2vh;
		}

		.ytitle {
			background-color: #ffb700;
			line-height: 26rpx;
		}

		.ritem {
			line-height: 20rpx;
		}


		.imgview {
			position: relative;
			width: 100%;

		}

		.areaitem {
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}




		.aimg {
			width: 60rpx;
			height: 35rpx;
		}

		.areas {
			background-color: rgba(255, 165, 0, 0.2);
			color: #000;
			margin-bottom: 10px;
			font-size: 10px;
		}

		.sitem {
			border: 2rpx solid orange;
		}


		#openbox {
			position: fixed;
		}

		#open112 {
			position: fixed;
			background-color: #F6F6F6;

		}

		#close112 {
			position: fixed;
		}

		#bigbox {
			position: fixed;
		}

		.myCard {
			width: 100%;
			// height:100%;
			position: relative;
			// border-radius: 20rpx;
			//overflow: hidden;
			z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				

				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 0px;
				}

				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 0px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			border: none;
			width: 0px;
			height: 0px;
			position: fixed
		}
	}
</style>